<template>
  <div class="zhuandanact">
    <!-- <div class="mb20">
      {{$route.query.name}}订单自动处理配置
    </div> -->
    <div class="mb20">
      <el-button @click="add()" round type="primary">创建转单规则</el-button>

      <el-button @click="add2()" round plain type="primary">添加其他商品已创建的转单规则</el-button>
    </div>
    <div class="mb20">
      <el-table :data="tableData"  border style="width: 100%">
          <el-table-column label="执行顺序" prop="transfer_order">
            <!-- <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template> -->
          </el-table-column>
          <el-table-column  prop="config_name" width="400px" label="转单组名称"></el-table-column>
          <el-table-column  prop="transfer_pages_count"  label="转单目标商品数"></el-table-column>
          <el-table-column  prop="status"  label="转单条件">
            <template slot-scope="scope">
              <div v-if="scope.row.transfer_type == 1">生产失败转单</div>
              <div v-if="scope.row.transfer_type == 2">订单进入转单</div>
            </template>
          </el-table-column>
          <el-table-column  prop="created_at"  label="创建时间"></el-table-column>
          <el-table-column  prop="date"  label="操作">
            <template slot-scope="scope">
              <el-button @click="bianji(scope.row)" type="text">编辑</el-button>
              <el-button @click="jilu(scope.row)" type="text">修改记录</el-button>

              <el-button @click="shanchu(scope.row)" type="text" style="margin-left: 20px;">删除</el-button>
              <i class="el-icon-top" @click="shang(scope.row)"  style="margin-left: 20px; color: #66b1ff; font-weight: bold; cursor: pointer;"></i>

            </template>
          </el-table-column>
       </el-table>
    </div>

    <el-dialog title="创建转单组" :visible.sync="log" :close-on-click-modal="false" width="820px">

      <div class="kflexc mb20">
        <div class="zuo180">请输入转单组名称：</div>
        <div><el-input v-model="all.config_name" placeholder="请输入转单组名称"></el-input></div>
      </div>

      <div class="kflexc mb20">
        <div class="zuo180">
          <div style="font-weight: bold; font-size: 18px;">订单筛选条件：</div>
        </div>
        <div>
          <el-tooltip class="item" effect="light" content="指定哪些订单执行转单" placement="top">
            <i class="el-icon-question ico" style="margin-left: 0; color: rgba(0, 0, 0, 0.65);"></i>
          </el-tooltip>
        </div>
      </div>

      <div class="kflexc mb20">
        <div class="zuo180">订单来源：</div>
        <div>
          <el-cascader v-model="all.auto_transfer_sources" collapse-tags :options="options" :props="props" @change="handleChange" placeholder="所有来源"></el-cascader>
        </div>
      </div>
      <div class="kflexc mb20">
        <div class="zuo180">选择订单状态：</div>
        <div>
          <el-select v-model="all.transfer_type" placeholder="选择订单状态">
            <el-option :value="1" label="生产失败转单"></el-option>
            <el-option :value="2" label="订单进入转单"></el-option>
          </el-select>
        </div>
      </div>
      <div class="kflexc mb20">
        <div class="zuo180">订单收货省市：</div>
        <div>
          <diqu :cengshu="2" :sheng="all.transfer_province" :shi="all.transfer_city" :transfer_area_code="all.transfer_area_code" :w="'300px'" @chuandizhi="chuandizhi" v-if="relo"></diqu>
        </div>
      </div>
      <div class="kflexc mb20">
        <div class="zuo180">选择年龄区间：</div>
        <div class="w120 kflexc">
          <el-input v-model="all.transfer_min_age" style="width: 125px;"  placeholder="起始年龄"></el-input>
          <span style="margin: 0 10px 0 10px;">-</span>
          <el-input v-model="all.transfer_max_age" style="width: 125px;" placeholder="截止年龄"></el-input>
        </div>
      </div>



      <div class="kflexc mb20">
        <div class="zuo180">
          <div style="font-weight: bold; font-size: 18px;">设置转单商品：</div>
        </div>
        <div>
          <el-tooltip class="item" effect="light" content="将按照设置的顺序执行转单，转单1生产失败后继续执行转单2，至发货或转完为止" placement="top">
            <i class="el-icon-question ico"  style="margin-left: 0;  color: rgba(0, 0, 0, 0.65);"></i>
          </el-tooltip>
        </div>
      </div>
      <draggable v-model="all.auto_transfer_pages" class="drag-container">
        <div v-for="(item,index) in all.auto_transfer_pages" :key="item.id" style="cursor: move;margin-left: 55px;padding-left: 15px;" class="t_add_item"  >
          <div class="kflexc" style="margin-top: 10px;margin-bottom: 10px;">
            <div  style="display: flex;align-items: center;width: 130px;">
              <div class="t_move_box">
                <img src="../../../../static/img/move.png" alt="">
              </div>
              转单商品{{index+1}}：
            </div>
            <div>
              <el-select filterable  v-model="item.id" clearable placeholder="请选择转单商品">
                  <el-option v-for="item in shopoptions" :key="item.id" :label="item.title+'_'+item.fetch_code" :value="item.id"></el-option>
              </el-select>
            </div>
          </div>
          <div class="kflexc" style="padding-left: 130px;">
            <div style="margin-left: 20px;"><el-checkbox v-model="item.check_reason" :true-label="1" :false-label="0">转单前判断失败原因</el-checkbox></div>
            <div style="margin-left: 20px;" class="kflexc" v-if="shopid == 304676 || shopid == 50481">
              <el-checkbox style="margin-right: 20px;" v-model="item.check_order_quantity_limit" :true-label="1" :false-label="0">转单前判断提单上限</el-checkbox>
              <el-tooltip class="item" style="padding-bottom: 10px;" effect="light" content="判断该商品对应的产品配置的提单上限是否达到，达到则跳过本次转单，执行下一条，配置位置：产品渠道管理——自动生产对接——管理对接产品按钮——提单配置" placement="top">
                <i class="el-icon-question ico"  style="margin-left: 0;  color: rgba(0, 0, 0, 0.65);"></i>
              </el-tooltip>
            </div>

          </div>
          <div v-if="item.check_reason == 1">
            <div class="kflexc mb20" style="padding-left: 130px;">

              <div>
                <div style="margin-bottom: 10px;">当原订单生产失败原因包含以下关键词时将停止转单操作</div>
                <div>
                  <el-input v-model="item.reason" placeholder="请输入关键词，多个关键词之间加英文“,”隔开"></el-input>
                </div>
              </div>
            </div>
          </div>

        </div>
      </draggable>


      <el-button type="primary" style="margin-left: 200px;margin-top: 20px;" round @click="tianjiashangpin">+ 添加转单商品</el-button>



      <!-- <div class="kflexc mb20">
        <div class="zuo180">转单商品2：</div>
        <div>
          <el-select filterable  v-model="all.auto_transfer_pages[1].id" clearable placeholder="请选择转单商品2">
              <el-option v-for="item in shopoptions" :key="item.id" :label="item.title+'_'+item.fetch_code" :value="item.id"></el-option>
          </el-select>
        </div>
        <div style="margin-left: 20px;"><el-checkbox v-model="all.auto_transfer_pages[1].check_reason" :true-label="1" :false-label="0">转单前判断失败原因</el-checkbox></div>
      </div>
      <div v-if="all.auto_transfer_pages[1].check_reason == 1">
        <div class="kflexc mb20">
          <div class="zuo180">&nbsp;</div>
          <div>
            <div style="margin-bottom: 10px;">当原订单生产失败原因包含以下关键词时将停止转单操作</div>
            <div>
              <el-input v-model="all.auto_transfer_pages[1].reason" placeholder="请输入关键词，多个关键词之间加英文“,”隔开"></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="kflexc mb20">
        <div class="zuo180">转单商品3：</div>
        <div>
          <el-select filterable  v-model="all.auto_transfer_pages[2].id" clearable placeholder="请选择转单商品3">
              <el-option v-for="item in shopoptions" :key="item.id" :label="item.title+'_'+item.fetch_code" :value="item.id"></el-option>
          </el-select>
        </div>
        <div style="margin-left: 20px;"><el-checkbox v-model="all.auto_transfer_pages[2].check_reason" :true-label="1" :false-label="0">转单前判断失败原因</el-checkbox></div>
      </div>
      <div v-if="all.auto_transfer_pages[2].check_reason == 1">
        <div class="kflexc mb20">
          <div class="zuo180">&nbsp;</div>
          <div>
            <div style="margin-bottom: 10px;">当原订单生产失败原因包含以下关键词时将停止转单操作</div>
            <div>
              <el-input v-model="all.auto_transfer_pages[2].reason" placeholder="请输入关键词，多个关键词之间加英文“,”隔开"></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="kflexc mb20">
        <div class="zuo180">转单商品4：</div>
        <div>
          <el-select filterable  v-model="all.auto_transfer_pages[3].id" clearable placeholder="请选择转单商品4">
              <el-option v-for="item in shopoptions" :key="item.id" :label="item.title+'_'+item.fetch_code" :value="item.id"></el-option>
          </el-select>
        </div>
        <div style="margin-left: 20px;"><el-checkbox v-model="all.auto_transfer_pages[3].check_reason" :true-label="1" :false-label="0">转单前判断失败原因</el-checkbox></div>
      </div>
      <div v-if="all.auto_transfer_pages[3].check_reason == 1">
        <div class="kflexc mb20">
          <div class="zuo180">&nbsp;</div>
          <div>
            <div style="margin-bottom: 10px;">当原订单生产失败原因包含以下关键词时将停止转单操作</div>
            <div>
              <el-input v-model="all.auto_transfer_pages[3].reason" placeholder="请输入关键词，多个关键词之间加英文“,”隔开"></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="kflexc mb20">
        <div class="zuo180">转单商品5：</div>
        <div>
          <el-select filterable  v-model="all.auto_transfer_pages[4].id" clearable placeholder="请选择转单商品5">
              <el-option v-for="item in shopoptions" :key="item.id" :label="item.title+'_'+item.fetch_code" :value="item.id"></el-option>
          </el-select>
        </div>
        <div style="margin-left: 20px;"><el-checkbox v-model="all.auto_transfer_pages[4].check_reason" :true-label="1" :false-label="0">转单前判断失败原因</el-checkbox></div>
      </div>
      <div v-if="all.auto_transfer_pages[4].check_reason == 1">
        <div class="kflexc mb20">
          <div class="zuo180">&nbsp;</div>
          <div>
            <div style="margin-bottom: 10px;">当原订单生产失败原因包含以下关键词时将停止转单操作</div>
            <div>
              <el-input v-model="all.auto_transfer_pages[4].reason" placeholder="请输入关键词，多个关键词之间加英文“,”隔开"></el-input>
            </div>
          </div>
        </div>
      </div> -->

      <div slot="footer" class="dialog-footer">
        <el-button round @click="log = false">取消</el-button>
        <el-button type="danger" round @click="zhuandango">确定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="添加其他商品已创建的转单规则" :visible.sync="log2" :close-on-click-modal="false" width="620px">
      <div>
        <el-select filterable v-model="qitaall.id" @change="change2" clearable placeholder="请选择转单商品">
            <el-option v-for="item in shopoptions" :key="item.id" :label="item.title+'_'+item.fetch_code" :value="item.id"></el-option>
        </el-select>
      </div>
      <div>
        <el-checkbox-group v-model="qitaall.config_ids">
            <el-checkbox :label="item.id" v-for="item in tableData2" :key="item.id">{{item.config_name}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button round @click="log2 = false">取消</el-button>
        <el-button type="danger" round @click="zhuandango2">确定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="商品转单历史修改记录" :visible.sync="log3" :close-on-click-modal="false" width="1200px">
      <el-table :data="tableData3"  border style="width: 100%">
          <el-table-column  prop="created_at" width="200px" label="修改时间"></el-table-column>
          <el-table-column  prop="user_name" width="200px"  label="修改人"></el-table-column>
          <el-table-column  prop="modifications"   label="修改内容"></el-table-column>
       </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" round @click="log3 = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
  import diqu from '@/components/productionDelivery/tongyidizhi/zidongshengchanguanliduo.vue'
  import axios from "axios";
  export default {
    name: 'zhuandanact',
    components:{
      diqu,
      draggable
    },
    data() {
      return {
        log3:false,
        tableData3:[],
        props: { multiple: true },
        options:[],
        tableData:[],
        log:false,
        all:{
            id:"",
            "page_id": this.$route.query.id,
            "config_name": "",
            "transfer_province": "",
            "transfer_city": "",
            "transfer_max_age": "",
            "transfer_min_age": "",
            "status": "",
            "page": "",
            "auto_transfer_sources": [],
            "auto_transfer_pages": [{id:"",reason:"",check_reason:""},{id:"",reason:"",check_reason:""},{id:"",reason:"",check_reason:""},{id:"",reason:"",check_reason:""},{id:"",reason:"",check_reason:""}],
            transfer_type:"",
            transfer_area:[],
            transfer_area_code:[]
        },
        relo:true,
        shopoptions:[],
        log2:false,
        qitaall:{
          id:"",
          config_ids:[]
        },
        tableData2:[],
        shopid:""
      }
    },
    created() {
      this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      this.getfromlist()
      this.getshoplist()
      this.getlist()
    },
    mounted() {

    },
    methods: {
      jilu:function(item){
        axios.get('/api/plan-market/zhuandan/modifications?id='+item.id)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.tableData3 = response.data.data
            this.log3 = true
          } else {
            this.$message.error(response.data.msg.info);
          }
        })

      },
      tianjiashangpin:function(){
        this.all.auto_transfer_pages.push({id:"",reason:"",check_reason:""})
      },
      add2:function(){
        this.qitaall = {
          id:"",
          config_ids:[]
        }
        this.log2 = true
      },
      change2:function(){
        axios.get('/api/plan-market/zhuandan/list?page_id='+this.qitaall.id)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.tableData2 = response.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      },
      zhuandango2:function(){

        axios.post('/api/plan-market/zhuandan/config/copy',{id:this.$route.query.id,config_ids:this.qitaall.config_ids})
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message({
            	message: '操作成功！',
            	type: 'success'
            });
            this.log2 = false
            this.getlist()
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      },
      shanchu:function(item){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            axios.post('/api/plan-market/zhuandan/del',{id:item.id})
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message({
                	message: '操作成功！',
                	type: 'success'
                });
                this.getlist()

              } else {
                this.$message.error(response.data.msg.info);
              }
            })
          })

      },
      shang:function(item){
        axios.post('/api/plan-market/zhuandan/order/up',{id:item.id})
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message({
            	message: '操作成功！',
            	type: 'success'
            });
            this.getlist()
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      },
      getlist:function(){

        axios.get('/api/plan-market/zhuandan/list?page_id='+this.$route.query.id)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.tableData = response.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      },
      bianji:function(item){
        axios.get('/api/plan-market/zhuandan/info?id='+item.id)
          .then(response => {
            if (response.data.msg.code == 0) {
              let arr = []
              response.data.data.auto_transfer_sources.forEach(item=>{
                arr.push([item.channel_id,item.source])
              })
              response.data.data.auto_transfer_sources = arr

              // let arr2 = []
              // response.data.data.auto_transfer_pages.forEach(item=>{
              //   if(item.page_id == 0){
              //     arr2.push("")
              //   }else{
              //     arr2.push(item.page_id)
              //   }
              // })
              // response.data.data.auto_transfer_pages = arr2

              // response.data.data.auto_transfer_pages.forEach(item=>{
              //   if(item && item.id){
              //     item.id = item.id.toString()
              //   }
              // })


              if(response.data.data.transfer_area){
                response.data.data.transfer_area = JSON.parse(response.data.data.transfer_area)
              }
              if(response.data.data.transfer_area_code){
                response.data.data.transfer_area_code = JSON.parse(response.data.data.transfer_area_code)
              }

              this.all = JSON.parse(JSON.stringify(response.data.data))

              this.relo = false
              this.$nextTick(()=>{
                this.relo = true
              })

              this.log = true
            } else {
              this.$message.error(response.data.msg.info);
            }
          })

      },
      chuandizhi:function(val){
        console.log(val)
        this.all.transfer_province = val.sheng
        this.all.transfer_city = val.shi

        this.all.transfer_area = val.transfer_area
        this.all.transfer_area_code = val.transfer_area_code

      },
      handleChange:function(){
        console.log(1)
        console.log(this.all.auto_transfer_sources)
      },
      //订单来源列表
      getfromlist(){
          axios.get('/api/plan-market/out-store/source').then(response => {
            if (response.data.msg.code == 0) {
              var arr = []
              for(var x=0;x<response.data.data.length;x++){
                  arr.push({
                      value:response.data.data[x].id,
                      label:response.data.data[x].channel_name,
                      children:[]
                  })
                  if(response.data.data[x].source.length!=0){
                      for(var y=0;y<response.data.data[x].source.length;y++){
                          arr[x].children.push({
                              value:response.data.data[x].source[y].source_name,
                              label:response.data.data[x].source[y].source_name
                          })
                      }
                  }
              }
              this.options = arr
            } else {
              this.$message.error(response.data.msg.info);
            }
        })
      },
      //商品列表
      getshoplist(){
          axios.get('/api/gth/order-pages2?status=100&_page_size=2000')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.shopoptions = response.data.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      add:function(){
        this.all = {
            id:"",
            "page_id": this.$route.query.id,
            "config_name": "",
            "transfer_province": "",
            "transfer_city": "",
            "transfer_max_age": "",
            "transfer_min_age": "",
            "status": "",
            "page": "",
            "auto_transfer_sources": [],
            "auto_transfer_pages": [{id:"",reason:"",check_reason:""},{id:"",reason:"",check_reason:""},{id:"",reason:"",check_reason:""},{id:"",reason:"",check_reason:""},{id:"",reason:"",check_reason:""}],
            transfer_type:"",
            transfer_area:[],
            transfer_area_code:[]
        }
        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
        })
        this.log = true
      },

      zhuandango:function(){
        if(!this.all.transfer_type){
          this.$message.error('请选择转单条件');
          return
        }
        axios.post('/api/plan-market/zhuandan/make',this.all)
        	.then(response => {
        		if(response.data.msg.code == 0){
        			this.$message({
        				message: '添加成功！',
        				type: 'success'
        			});
        			this.log = false
              this.getlist()
        		}else{
              this.$message.error(response.data.msg.info);
        		}
        	})
      }
    }

  }
</script>

<style scoped lang="scss">
  /deep/ .el-input__inner{ width:370px; background: #F3F5F8; border-color:#F3F5F8 ;}
  .w120{
    /deep/ .el-input__inner{ width:125px;}
  }
  /deep/ .el-button--danger{background-color: #2974FF; border-color: #2974FF;}
  /deep/ .el-checkbox-group{ padding: 20px;}
  /deep/ .el-checkbox{ padding-bottom: 10px; display: block;}
</style>
<style scoped>
.t_move_box{
  width: 6px;
  height: 14px;
  margin-right: 5px;

}
.t_move_box img{
  display: none;
}
.t_add_item{
  border: 1px solid white;
}
.t_add_item:hover{
  border-color: #409EFF;
}
.t_add_item:hover .t_move_box img{
  display: block;
}
</style>
